.marknote-loading{
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  // background: var(--contentBackgroundColor);
  &::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: var(--menuBackgroundColorGlass);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .marknote-loading-box{
    position: relative;
    width: 3em;
    height: 3em;
    
    &::before{
      content: "";
      display: block;
      position: absolute;
      left: 0.75em;
      top: 0.75em;
      border-radius: 50%;
      background-color: var(--primaryBackgroundColor,#083D56);
      width: 1.5em;
      height: 1.5em;
      z-index: 1;
      -webkit-animation: blow-grow 4s infinite cubic-bezier(.45,-0.43,.63,1.94);
      animation: blow-grow 4s infinite cubic-bezier(.45,-0.43,.63,1.94);
   }
  
    &::after{
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1rem;
      height: 1rem;
      z-index: 0;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      -webkit-animation: blow-fade-in 1s infinite cubic-bezier(.45,-0.43,.63,1.94), blow-shadow 1s infinite cubic-bezier(.45,-0.43,.63,1.94);
      animation: blow-fade-in 1s infinite cubic-bezier(.45,-0.43,.63,1.94), blow-shadow 1s infinite cubic-bezier(.45,-0.43,.63,1.94);
    }


  }
}

@-webkit-keyframes blow-fade-in {
  0% {
    opacity: 0;
  }
  2%, 100% {
    opacity: 1;
  }
}
@keyframes blow-fade-in {
  0% {
    opacity: 0;
  }
  2%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes blow-shadow {
  0% {
    box-shadow: -4em 0 0 0.015em var(--primaryBackgroundColor,#083D56), 4em 0 0 0.015em var(--primaryBackgroundColor,#083D56);
  }
  75%, 100% {
    box-shadow: 0 0 0 0.4em var(--primaryBackgroundColor,#083D56), 0 0 0 0.4em var(--primaryBackgroundColor,#083D56);
  }
}
@keyframes blow-shadow {
  0% {
    box-shadow: -4em 0 0 0.015em var(--primaryBackgroundColor,#083D56), 4em 0 0 0.015em var(--primaryBackgroundColor,#083D56);
  }
  75%, 100% {
    box-shadow: 0 0 0 0.4em var(--primaryBackgroundColor,#083D56), 0 0 0 0.4em var(--primaryBackgroundColor,#083D56);
  }
}
@-webkit-keyframes blow-grow {
  0% {
    transform: scale(0);
    background-color: var(--primaryBackgroundColor,#083D56);
  }
  25% {
    transform: scale(0.5);
    background-color: var(--primaryBackgroundColor,#083D56);
  }
  50% {
    transform: scale(1);
    background-color: var(--primaryBackgroundColorHover,#083D56);
  }
  75% {
    transform: scale(1.5);
    background-color: var(--primaryBackgroundColorHover,#083D56);
  }
  100% {
    transform: scale(2);
    background-color:var(--primaryBackgroundColorActive,#083D56);
  }
}
@keyframes blow-grow {
  0% {
    transform: scale(0);
    background-color: var(--primaryBackgroundColor,#083D56);
  }
  25% {
    transform: scale(0.5);
    background-color: var(--primaryBackgroundColor,#083D56);
  }
  50% {
    transform: scale(1);
    background-color: var(--primaryBackgroundColorHover,#0E5F76);
  }
  75% {
    transform: scale(1.5);
    background-color: var(--primaryBackgroundColorHover,#0E5F76);
  }
  100% {
    transform: scale(2);
    background-color: var(--primaryBackgroundColorActive,#083D56);
  }
}